<template>
  <div
    class="input-block d-flex align-center px-5 py-3"
    @click="type === 'dist' ? $router.push('/distPicker') : null"
  >
    <span class="text--secondary" v-text="label"></span>
    <input
      type="text"
      :value="value"
      @input="input"
      :readonly="type === 'dist' ? true : false"
    />
    <v-icon v-if="type === 'dist'">mdi-chevron-right</v-icon>
  </div>
</template>

<script>
export default {
  name: 'input-block',
  props: ['label', 'value', 'type'],
  methods: {
    input() {
      this.$emit('input', event.target.value);
    }
  }
};
</script>

<style lang="less" scoped>
.input-block {
  background: white;
  font-size: 15px;
  position: relative;
  span {
    width: 25%;
  }
  i {
    position: absolute;
    right: 0;
    transform: translateX(-9px);
  }
}
</style>
